<template>
  <div id="wrapper" style="display: block">
    <div class="page-product-view" data-log="商品详情">

      <div class="header">
        <div class="tit"><!--vue-if--></div>
        <div class="right"><a href="javascript:;" data-event="30000000110001001" data-stat-id="6c93ea1c6bb6eb01"
                              onclick="_msq.push(['trackEvent', '8fb4bea51daee8a5-6c93ea1c6bb6eb01', 'javascript:;', 'pcpid']);">
          <router-link :to="{name:'Search'}">
            <div class="icon icon-search">
            </div>
          </router-link>
        </a></div>
      </div>

      <div class="product-view">
        <div class="b1">
          <img :src="product.thumb">
        </div>
        <div class="b2">
          <div class="b21">
            <div class="b211">
              <div class="name"><p>{{product.name}} </p></div>
              <div class="price"><strong>{{product.price}}元</strong></div>
            </div>
            <div class="b212">
              <div class="icon-fenxiang"></div>
            </div>
          </div>
          <div class="b22">
            <p>{{product.description}}</p>
          </div>
        </div>
        <div class="mt20" style="display: none;"></div>

        <!--<ul class="b3">-->
        <!--<li><span class="on">白色</span></li>-->
        <!--</ul>-->

        <ul class="b3" style="display: none;">
          <li><span>通用</span></li>
        </ul>

        <div class="ui-b7">
          <h3>为您推荐</h3>
          <div class="ui-carousel-container">
            <div class="ui-carousel-viewport">
              <div v-for="recommend in recommends" style="display: inline">
                <router-link :to="{name:'Show',params:{id:recommend.id}}">
                  <img :src="recommend.thumb">
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="b5">
          <div class="b51"></div>
          <div class="b52">
            <div class="blc" v-html="product.markdown_html_code">
              <ul>
                <li>
                  <div class="img">
                    <img src="http://i1.mifile.cn/v1/a1/T1blVjBvJT1RXrhCrK.jpg?w=1080&amp;h=1920&amp;s=94.4">
                  </div>
                </li>

              </ul>
            </div>
          </div>
        </div>
        <div class="b7">
          <div class="b70">
            <router-link :to="{name:'Home'}" class="icon-home">
            </router-link>
          </div>
          <div class="b72">
            <!--<a href="javascript:;" class="off">暂时缺货</a>-->
            <a href="javascript:;" @click="buy(product)">立即购买</a>
          </div>

          <div class="b73">
            <a href="/1/#/cart/index">
              <div class="icon-gouwuche"></div>
            </a>
          </div>
        </div>
        <a href="javascript:;" id="top" style="visibility: visible;">
          <img src="http://s1.mi.com/m/images/m/top.png">
        </a>
      </div>
      <div class="share-component"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        product: {},
        recommends: [],
      }
    },
    created() {
      this.init(); //初始化
    },
    watch: {
      '$route': ['init']
    },

    methods: {
      init: function () {
        let id = this.$route.params.id;
        this.axios.get(`/product/show/${id}`)
          .then((response) => {
            // console.log(response.data);
            this.product = response.data.product;
            this.recommends = response.data.recommends;
          })
      },
      buy: function (product) {
        let token = localStorage.token
        if (!token) {
          this.$router.push({name: 'Login'})
        } else {
          let data = {
            product_id: product.id,
          }
          this.axios.post('/cart',data)
          this.$router.push({name:'Cart'})
        }
      }
    }
  }
</script>


